<template>
  <div class="login-wrap">
    <img class="bg-icon" src="@/assets/png/login-bg.png" alt="" />
    <div class="logo-wrap">
      <SvgIcon icon-class="logo" />
      <div class="title-wrap">
        <div class="title">时空数据平台</div>
        <div class="sub-title">开启物理世界数字孪生仿真还原</div>
      </div>
    </div>
    <div v-if="!forgetVisible" class="login-content">
      <div class="tab-wrap">
        <div class="tab-item" :class="{ active: currTab === '1' }">密码登录</div>
        <div class="tab-item" :class="{ active: currTab === '2' }">短信登录</div>
      </div>
      <div class="tab-content">
        <el-form
          ref="loginFormRef"
          :rules="loginRules"
          class="login-ul"
          :model="loginForm"
          label-width="0"
        >
          <el-form-item prop="mobileNo" label="" class="input-box">
            <el-input v-model="loginForm.mobileNo" placeholder="请输入手机号码或邮箱" />
          </el-form-item>
          <el-form-item prop="loginPwd" label="" class="input-box">
            <el-input
              v-model="loginForm.loginPwd"
              type="password"
              show-password
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-form-item
            v-if="isShowCaptcha"
            label=""
            prop="verifyCode"
            class="input-box login-captcha"
          >
            <div class="input-captcha">
              <el-input v-model="loginForm.verifyCode" placeholder="验证码" />
            </div>
            <div class="view-captcha" @click="captchaBtn">
              <img :src="captchaSrc" alt="" />
            </div>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="handleLogin" :disabled="!read">登录</el-button>
        <div class="opt-wrap">
          <div class="opt-btn">账号注册</div>
          <div class="opt-btn" @click="onForget">忘记密码</div>
        </div>
      </div>
      <div class="agreement-wrap">
        <el-checkbox v-model="read"></el-checkbox>
        <div>已阅读并同意</div>
        <div class="link">《服务协议》</div>
        <div class="link">《隐私政策》</div>
      </div>
    </div>
    <!-- 找回 -->
    <div v-else class="login-content forget">
      <div class="tab-wrap">
        <div class="tab-item" :class="{ active: forgetCurrTab === '1' }">邮箱找回</div>
        <div class="tab-item" :class="{ active: forgetCurrTab === '2' }">手机号找回</div>
      </div>
      <div class="tab-content">
        <el-form :rules="rules" class="model-form" ref="formRef" :model="ruleForm" :label-width="0">
          <el-form-item label="" prop="email">
            <el-input placeholder="请输入邮箱地址" v-model="ruleForm.email"> </el-input>
          </el-form-item>
          <el-form-item label="" prop="verifyCode">
            <el-input placeholder="请输入验证码" v-model="ruleForm.verifyCode">
              <template #suffix>
                <div v-if="!timer" @click="sendCode" class="send">获取验证码</div>
                <div v-else class="seconds">{{ seconds }}s</div>
              </template></el-input
            >
          </el-form-item>
          <el-form-item label="" prop="loginPwd">
            <el-input
              placeholder="请输入密码"
              type="password"
              show-password
              autocomplete="new-password"
              v-model="ruleForm.loginPwd"
            />
          </el-form-item>
          <el-form-item label="" prop="confirmLoginPwd">
            <el-input
              placeholder="请再次输入密码"
              type="password"
              show-password
              autocomplete="new-password"
              v-model="ruleForm.confirmLoginPwd"
            />
          </el-form-item>
        </el-form>
        <el-button type="primary" :disabled="resetLoading" @click="save">确认修改</el-button>
      </div>
      <div class="btn-wrap">
        已有账号？
        <div class="btn" @click="backLogin">请登录</div>
      </div>
    </div>
  </div>
  <!-- <JLLogin :title="title" @login="handleLogin" /> -->
</template>

<script setup lang="ts">
import { useUserStore } from '@jl/common/store';
import { JLLogin } from '@jl/element-plus';
import { messageUtil } from '@jl/element-plus/utils';
import { useRouter } from 'vue-router';
import { useFindPwd } from './composables/useFindPwd';
import { getAppBaseConfigByAppId } from '@/api/user';
import { useRequest } from '@jl/common/composable';

defineOptions({
  name: 'LoginIndex',
});

const { run, data, error } = useRequest<any, any>(getAppBaseConfigByAppId, {
  sessionKey: '',
});
const { formRef, ruleForm, rules, seconds, timer, resetLoading, sendCode, save } = useFindPwd();
const loginFormRef = ref<any>(null);
const title = process.env.VUE_APP_TITLE_MAIN || process.env.VUE_APP_TITLE;
const userStore = useUserStore();
const router = useRouter();
const currTab = ref<string>('1');
const forgetCurrTab = ref<string>('1');
const read = ref<boolean>(true);
const forgetVisible = ref<boolean>(false);
const loginForm: any = reactive({
  mobileNo: '',
  loginPwd: '',
  appId: '',
  verifyCode: '',
});
const loginRules: any = {
  mobileNo: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  loginPwd: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 18, message: '密码长度在6-18个字符', trigger: 'blur' },
  ],
  verifyCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
};
const captchaSrc = ref('/auth/api/login/lineCaptcha');
const isShowCaptcha = ref(true);

const handleLogin = () => {
  loginFormRef.value.validate(async (valid: any) => {
    if (valid) {
      // if (remember.value) {
      //   const localLoginForm = { ...loginForm, remember: true };
      //   localStorage.setItem('localLoginForm', JSON.stringify(localLoginForm));
      // } else {
      //   localStorage.removeItem('localLoginForm');
      // }

      try {
        loginForm.appId = process.env.VUE_APP_ID;
        const response = await userStore.login(loginForm);
        if (response) {
          router.push('/');
        }
      } catch (error) {
        // messageUtil.error((error as Error).message);
      }
    }
  });
};

onMounted(() => {
  getAppBaseConfigByAppIdFun({ appId: process.env.VUE_APP_ID });
});

onBeforeUnmount(() => {
  clearInterval(timer);
});

function onForget() {
  forgetCurrTab.value = '1';
  forgetVisible.value = true;
}

function backLogin() {
  forgetVisible.value = false;
}

function captchaBtn() {
  const randomNum = Math.floor(Math.random() * 100 + 1) + '';
  captchaSrc.value = `/auth/api/login/lineCaptcha?imgKey=${randomNum}`;
}

async function getAppBaseConfigByAppIdFun(params: { appId: string }) {
  await run(params);
  if (!error.value) {
    const { pwdloginWithCaptcha } = data.value;
    isShowCaptcha.value = pwdloginWithCaptcha === 1;
  }
}
</script>

<style lang="less" scoped>
.login-wrap {
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  .bg-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .logo-wrap {
    position: absolute;
    top: 50px;
    left: 65px;
    display: flex;
    .svg-icon {
      font-size: 66px;
      margin-right: 20px;
    }
    .title-wrap {
      color: #ffffff;
      .title {
        font-size: 35px;
        font-weight: 500;
        line-height: 49px;
      }
      .sub-title {
        font-size: 18px;
        font-weight: 200;
        letter-spacing: 5px;
      }
    }
  }
  .login-content {
    position: absolute;
    top: 256px;
    right: 189px;
    width: 482px;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    .tab-wrap {
      display: flex;
      padding: 50px 40px 0;
      .tab-item {
        font-size: 24px;
        color: #585858;
        margin-right: 45px;
        &.active {
          color: #0560fd;
          font-weight: 500;
        }
      }
    }
    .tab-content {
      flex: 1;
      padding: 37px 20px 0;
      .el-form {
        &-item {
          margin-bottom: 30px;
        }
      }
      :deep(.el-input) {
        --el-input-height: 66px;
        --el-input-bg-color: fade(#203580, 1%);
        --el-input-border-color: fade(#203580, 16%);
        &__inner {
          &::placeholder {
            --el-input-placeholder-color: fade(#000, 25%);
            font-size: 16px;
          }

          &[type='text'] + .el-input__suffix {
            .el-icon.el-input__password {
              background: url('~@/assets/png/eye_open.png') no-repeat;
            }
          }
          &[type='password'] + .el-input__suffix {
            .el-icon.el-input__password {
              background: url('~@/assets/png/eye_close.png') no-repeat;
            }
          }
        }
        .el-icon.el-input__password {
          width: 24px;
          height: 24px;
          svg {
            display: none;
          }
        }
      }
      .el-button {
        width: 100%;
        height: 54px;
        background: #0560fd;
        box-shadow: 0px 7px 10px 0px rgba(51, 119, 255, 0.44);
        border-radius: 4px;
        border: 1px solid rgba(32, 53, 128, 0.16);
        font-size: 18px;
        letter-spacing: 4px;
        &.is-disabled {
          background: #ebebeb;
          color: #b0b0b0;
          box-shadow: none;
          border-color: #ebebeb;
        }
      }
      .opt-wrap {
        display: flex;
        justify-content: space-between;
        padding: 20px 20px 31px;
        .opt-btn {
          font-size: 16px;
          font-weight: 400;
          color: #0560fd;
          line-height: 22px;
          cursor: pointer;
        }
      }
      .send {
        color: #0560fd;
        font-size: 16px;
        cursor: pointer;
      }
      .seconds {
        font-size: 16px;
      }
    }
    .agreement-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 86px;
      background: rgba(32, 53, 128, 0.01);
      box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.07);
      color: #585858;
      :deep(.el-checkbox) {
        --el-checkbox-input-height: 20px;
        --el-checkbox-input-width: 20px;
        --el-checkbox-border-radius: 50%;
        margin-right: 10px;
        &__inner {
          &::after {
            left: 42%;
            top: 30%;
          }
        }
        &.is-checked {
          .el-checkbox__input.is-checked .el-checkbox__inner::after {
            transform: rotate(45deg) scaleY(1.4);
          }
        }
      }
      .link {
        color: #0560fd;
      }
    }
    .input-captcha {
      flex: 1;
    }
    .view-captcha {
      flex: 0 0 168px;
      margin-left: 17px;
      height: 66px;
      background: #fffffe;
      border-radius: 4px;
      border: 1px solid rgba(32, 53, 128, 0.16);
      text-align: center;
      img {
        height: 100%;
      }
    }
    &.forget {
      .btn-wrap {
        display: flex;
        justify-content: flex-end;
        padding: 20px 40px 30px;
        color: #8b8b8b;
        font-size: 16px;
        .btn {
          color: #0560fd;
          cursor: pointer;
        }
      }
      .tab-content {
        .el-button {
          letter-spacing: 1px;
        }
      }
    }
  }
}
</style>
